<template>
	<view class="question">
		<scroll-view :style="{height:sh+'px'}" class="sv" scroll-y="true">
			<view v-if="historys.length>0">
				<view class="dialog" :class="{reverse:item.role=='user',assistant:item.role!='user'}"
					v-for="(item,index) in historys">
					<uni-icons :type="item.role=='user'?'contact':'chat-filled'" size="30"
						:color="item.role=='user'?'#999':'#0f0'"></uni-icons>
					<text class="msg">{{item.content}}</text>
				</view>
			</view>
		</scroll-view>
		<h1 style="height: 35px;"></h1>
		<view class="word">
			<uni-easyinput class="input" v-model="question" placeholder="请输入提问内容" />
			<view class="btn" @tap="send">提问</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		CONFIG
	} from '../../utils/config';
	let model = ref({
		"model": "moonshot-v1-8k",
		"messages": [],
		"temperature": 0.3
	})
	let question = ref()
	let historys = ref([])
	let sh = ref(520)
	async function send() {
		historys.value.push({
			"role": "user",
			"content": question.value
		})
		model.value.messages = historys.value
		let res = await uni.$post(CONFIG.kimi_url, model.value)
		console.log(res)
		historys.value.push(res.data.choices[0].message)
		//清空文本框
		question.value = ""
	}
</script>

<style>
	.word {
		display: flex;
		position: fixed;
		bottom: 50px;
		width: 100%;
	}

	.btn {
		padding: 7px;
		background-color: skyblue;
		border-radius: 7px;
		cursor: pointer;
	}

	.dialog {
		display: flex;
		margin: 5px;

		.msg {
			border: 1px solid skyblue;
			border-radius: 8px;
			padding: 5px;
		}

	}

	.reverse {
		flex-direction: row-reverse;
	}
</style>